<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <u-tabbar
      :value="index"
      :fixed="true"
      :border="false"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item text="首页" name="0" @click="clickEvent">
        <image
          class="slot_icon"
          slot="active-icon"
          src="https://oss.xhoven.com/09d3b1f5d9d0fc83154fc065e059677c.png"
        ></image>
        <image
          class="slot_icon"
          slot="inactive-icon"
          src="https://oss.xhoven.com/a5f57c0c5f1f2faedf4c23440ffe5e59.png"
        ></image
      ></u-tabbar-item>
      <u-tabbar-item text="商品" name="1" @click="clickEvent">
        <image
          class="slot_icon"
          slot="active-icon"
          src="https://oss.xhoven.com/840d616294da309ea55bb1cdc0ff8235.png"
        ></image>
        <image
          class="slot_icon"
          slot="inactive-icon"
          src="https://oss.xhoven.com/fe9783912423653586dd4322140f7aba.png"
        ></image
      ></u-tabbar-item>
      <u-tabbar-item text="营销" name="2" @click="clickEvent">
        <image
          class="slot_icon"
          slot="active-icon"
          src="https://oss.xhoven.com/a41650889391cd32f9565aaab89800d0.png"
        ></image>
        <image
          class="slot_icon"
          slot="inactive-icon"
          src="https://oss.xhoven.com/5bbe3b8fd3e14d0f67c35382724b762a.png"
        ></image
      ></u-tabbar-item>
      <u-tabbar-item text="客户" name="3" @click="clickEvent">
        <image
          class="slot_icon"
          slot="active-icon"
          src="https://oss.xhoven.com/e14b94b4c7de9766b62885eee6ddff08.png"
        ></image>
        <image
          class="slot_icon"
          slot="inactive-icon"
          src="https://oss.xhoven.com/fb68155d2302985f709c45580cdbdc02.png"
        ></image
      ></u-tabbar-item>
      <u-tabbar-item text="我的" name="4" @click="clickEvent">
        <image
          class="slot_icon"
          slot="active-icon"
          src="https://oss.xhoven.com/82d992045a9af27e1984fe588030616a.png"
        ></image>
        <image
          class="slot_icon"
          slot="inactive-icon"
          src="https://oss.xhoven.com/54939daa6c2b95c81bcc44c9517f8613.png"
        ></image
      ></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  data () {
    return {
      index: ''
    }
  },
  onReady () {
    this.index = uni.getStorageSync('currentIndex')
  },
  methods: {
    clickEvent (v) {
      if (uni.getStorageSync('tabrLoading')) {
        this.$refs.uToast.show({
          type: 'error',
          message: '请勿短时间内多次点击!'
        })
        setTimeout(() => {
          uni.setStorageSync('tabrLoading', false)
        }, 1000)
        return
      }
      uni.setStorageSync('tabrLoading', true)
      uni.setStorageSync('currentIndex', v)
      if (v === '0') {
        uni.switchTab({
          url: '/pages/home/home',
          success: () => {
            uni.setStorageSync('tabrLoading', false)
          }
        })
      } else if (v === '1') {
        uni.switchTab({
          url: '/pages/goods/goods',
          success: () => {
            uni.setStorageSync('tabrLoading', false)
          }
        })
      } else if (v === '2') {
        uni.switchTab({
          url: '/pages/marketing/marketing',
          success: () => {
            uni.setStorageSync('tabrLoading', false)
          }
        })
      } else if (v === '3') {
        uni.switchTab({
          url: '/pages/client/client',
          success: () => {
            uni.setStorageSync('tabrLoading', false)
          }
        })
      } else if (v === '4') {
        uni.switchTab({
          url: '/pages/my/my',
          success: () => {
            uni.setStorageSync('tabrLoading', false)
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.slot_icon {
  width: 38rpx !important;
  height: 38rpx !important;
}

::v-deep .u-tabbar__content {
  box-shadow: 2rpx 27rpx 15rpx 20rpx rgba(0, 0, 0, 0.05);
}
</style>
